<!--
 * @Author: 黄宇/Hyuishine
 * @Date: 2022-05-16 15:08:03
 * @LastEditors: 徐伟杰
 * @LastEditTime: 2022-10-21 15:10:16
 * @Description: 
 * @Email: hyuishine@gmail.com
 * @Company: 3xData
 * @youWant: 技术服务机构=>工作场所基本信息
-->

<template>
  <!-- 单位基本信息 -->
  <view class="collapsePane">
    <!-- 字段标题 -->
    <view class="title" @click="status = !status">
      工作场所基本信息
      <view :class="status ? 'cuIcon-unfold' : 'cuIcon-right'" />
    </view>

    <!-- 折叠中的内容 -->
    <view class="pane" :class="status ? 'unfold' : 'fold'">
      <view class="card_form scrollPane" v-for="(item, index) in form.siteList" :key="index">
        <!-- 单个表单项  -->
        <view :class="formItem.type === 'input' ? 'formItem' : 'formItem_doubleRow'" v-for="(formItem, i) in formBuild"
          :key="i">
          <!-- 字段标题 -->
          <view class="label">{{ formItem.label }}</view>

          <!-- 输入区域 -->
          <template>
            <!-- 普通输入框 -->
            <input class="content" v-if="formItem.type === 'input'" :disabled="formItem.disabled"
              v-model="item[formItem.prop]" :placeholder="'请输入' + formItem.label" />

            <view class="content" v-else-if="formItem.type === 'image'">
              <encapsulation-preview :fileUrl="item[formItem.prop]"></encapsulation-preview>
            </view>
            <!-- 文本域 -->
            <textarea class="content" v-else-if="formItem.type === 'textarea'" auto-height :disabled="formItem.disabled"
              v-model="item[formItem.prop]" :placeholder="'请输入' + formItem.label" />

            <!-- <image mode="widthFix"
                   style="width:240rpx;height:240rpx"
                   v-if="formItem.type === 'image'"
                   :src="baseApiUrl+item[formItem.prop]" /> -->

          </template>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import EncapsulationPreview from '../components/EncapsulationPreview.vue';
export default {
  components: { EncapsulationPreview },
  name: "workPlace",
  props: {
    form: {
      type: Object,
      default: () => { },
    },
  },
  data() {
    return {
      status: false, // true为开启

      /*
      构建表单用到的数据
      label:标题;
      prop:绑定的表单字段;
      type:类型:输入框/文本域/图片/文件 input/textarea/image/file
      require:校验类型:非空/手机号码/ required/phone
      diabled:是否禁用
      */
      formBuild: [
        {
          label: "场地名称",
          prop: "name",
          type: "input",
        },
        {
          label: "工作场所地址",
          prop: "address",
          type: "input",
        },
        {
          label: "建筑面积",
          prop: "areaSize",
          type: "input",
        },
        {
          label: "产权证明或租凭合同(需上传原件)",
          prop: "securitiesFiles",
          type: "image",
        },
      ],
    };
  },
};
</script>
<style lang="scss" scoped></style>
